<template>
	<view class="checkout">
		<view class="address">
			<navigator v-show="shipping_method=='package'" url="/sm_shop/pages/address/address?origin=order-create">
				<view class="person">
					<view class="name">收货人：<text>{{address.name}}</text></view>
					<view class="phone">{{address.telephone}}</view>
				</view>
				<view class="detail">
					收货地址：<text>{{address.province_name}}{{address.city_name}}{{address.area_name}}{{address.detail_address}}</text>
				</view>
				<view class="edit"></view>
			</navigator>

			<view class="pickup-person" v-bind:class="{'hide':shipping_method!='pickup'}">
				<view class="name">
					<input placeholder="请填写收货人姓名" v-model="pickup_person" type="text" />
				</view>
				<view class="phone">
					<input placeholder="请填写收货人电话" v-model="pickup_phone" type="number" />
				</view>
			</view>
		</view>
		<view class="shop-title">{{shop_name}}</view>

		<view class="key-value shipping">

			<view class="key">配送方式</view>

			<view class="value">
				<text v-on:click="choose_shipping('pickup')" data-shipping="pickup" class="item" v-bind:class="{'active':shipping_method=='pickup'}">上门自提</text>
				<text v-on:click="choose_shipping('package')" data-shipping="package" class="item" v-bind:class="{'active':shipping_method=='package'}">快递配送</text>
			</view>

		</view>

		<navigator url="/sm_shop/pages/pickup/list" class="key-value pickup" v-bind:class="{'hide':shipping_method!='pickup'}">

			<view class="key">
				<text v-show="!pickup">请选择自提门店</text>
				<text v-show="pickup">{{pickup?pickup.name:''}}</text>
				<text class="m-l50" v-show="pickup">{{pickup?pickup.distance:''}}</text>
			</view>
			<view class="value">
				<view class="arrow"></view>
			</view>

		</navigator>

		<view class="product-list">

			<block v-for="item,index in box_list">
				<view class="item">
					<view class="img">
						<image v-bind:src="item.img"></image>
					</view>
					<view class="info">
						<view class="name">
							{{item.box_name}}
						</view>
						<view class="product-option"> </view>
						<view class="price-number">
							<view class="price">￥{{item.box_price}}</view>
							<view class="number">x <text>{{item.box_number}}</text></view>
						</view>
					</view>
				</view>
			</block>


		</view>

		<!--
    <view class="key-value shipping">
        <view class="key">配送方式</view>
        <view class="value">快递￥8.00</view>
    </view>
    -->

		<view class="key-value note">
			<view class="key">买家留言</view>
			<input class="value" bindinput="setMessage" placeholder="不超过50字" maxlength="50" type="text" />
		</view>
		<view class="key-value product-total">
			<view class="key">盲盒金额</view>
			<view class="value">￥{{total.box.price}}</view>
		</view>
		<view class="key-value shipping-total">
			<view class="key">运费</view>
			<view class="value">￥{{total.shipping.price}}</view>
		</view>
		<view class="key-value total-total">
			<view class="key"></view>
			<view class="value">合计：<text class="red">￥{{total.total.price}}</text></view>
		</view>


		<view class="order-panel">
			<view class="total">
				合计：<text class="red">￥{{total.total.price}}</text>
			</view>
			<view v-show="order_id==0" v-on:click='create_order()' class="btn btn-order">提交订单</view>
			<view v-show="order_id!=0" v-on:click="pay_order()" class="btn btn-pay">去支付</view>
		</view>

	</view>
</template>

<script>
	const appInstance = getApp();
	export default {
		data() {
			return {
				shop_name: '',
				order_id: 0,
				cartids: '',
				buy: {
					box_goods_id:0,
					box_number:1
					// goods_id: '',
					// option_id: '',
					// goods_num: 0,
				},
				is_pindan: 0, // 是否为拼单
				pindan_order: 0, // 拼单的情况，0:主单（自己创建），!0: 和其他用户拼单
				// product_id:'',
				box_list: [],
				checkout: {},
				message: '',
				total: {
					shipping: 0,
					goods: 0,
					total: 0
				},

				shipping_method: 'package', // pickup or package
				pickup: null,
				pickup_person: '', // 自提收货人姓名
				pickup_phone: '', // 自提收货人手机号码

				address: {}
			}
		},
		onLoad: function(options) {

			var t = this;
			this.shop_name = appInstance.globalData.shop_name;
			this.cartids = options.cartids ? options.cartids : ''
			this.buy = {
				box_goods_id : options.box_goods_id,
			};

			this.is_pindan = options.is_pindan ? options.is_pindan : 0;
			this.pindan_order = options.is_pindan ? options.pindan_order : 0;
			t.checkout_init();

		},
		onShow: function() {

			console.log('on show 方法');

			var addr = uni.getStorageSync('order-address');
			if (addr) {
				this.address = addr;

			}

			this.getCheckedPickup();
		},
		methods: {
			checkout_init: function() {

				var url = '&m=sm_shop_plugin_box&r=checkout.checkout.index';

				var data = {};

				if (this.buy) {

					data['buy[box_goods_id]'] = this.buy.box_goods_id;
					data['buy[box_number]'] = 1;
					data['is_pindan'] = this.is_pindan;
					data['pindan_order'] = this.pindan_order;
				}
				
				var t = this;

				appInstance.globalData.request(url, data, 'GET', res => {

					console.log(res);

					if ( res.data.status==1 && res.data.description=='请先登录') {
						uni.navigateTo({
							url:'/sm_shop/pages/user/login',
						})
					}
					t.box_list = res.data.box;
					t.total = res.data.total;
					t.address = res.data.address;
					t.checkout = res.data;


					//todo 自提点检测
					t.getCheckedPickup();

				});

			},

			getCheckedPickup: function() {

				var pickup = uni.getStorageSync('pickup');

				if (pickup) {

					this.pickup = pickup;
				}

			},


			create_order: function() {

				var t = this;

				var url = '&m=sm_shop_plugin_box&r=checkout.order.create_by_xcx';

				var data = {

					address: JSON.stringify(this.address),
					box: JSON.stringify(this.box_list),
					cartids: t.cartids,
					message: this.message,
					shipping_method: this.shipping_method,
					is_pindan: this.is_pindan,
					pindan_order: this.pindan_order,
				};

				if (this.shipping_method == 'pickup') {
					data.pickup = this.pickup ? JSON.stringify(this.pickup) : '';
					data.pickup_person = this.pickup_person;
					data.pickup_phone = this.pickup_phone;
				}

				appInstance.globalData.request(url, data, "POST", res => {

					if (res.data.status) {

						uni.showToast({
							title: res.data.description,
							icon: 'success',
							duration: 1200
						});
					}

					if (res.data.order_id) {

						t.order_id = res.data.order_id;
						uni.showToast({
							title: '订单创建成功，请继续支付',
							icon: 'none',
							duration: 1800
						});
					}


				});

			},

			setMessage: function(e) {

				this.message = e.detail.value;

			},


			pay_order: function(e) {

				//todo 请求 支付参数
				var url = '&r=checkout.xpay.index_xcx';

				var data = {
					order_id: this.order_id,
				};

				var t = this;
				appInstance.globalData.request(url, data, 'GET', res => {

					if (res.data.nonceStr) {
						uni.requestPayment({
							timeStamp: res.data.timeStamp,
							nonceStr: res.data.nonceStr,
							package: res.data.package,
							signType: res.data.signType,
							paySign: res.data.paySign,
							success(res) {

								console.log(res);

								t.pay_notify();
								// 跳转到下单成功页面
								uni.navigateTo({
									url: '/sm_shop/pages/pay/success?order_id=' + t.order_id
								});
							},
							fail(res) {
								console.log(res);
								/*wx.showToast({
								  title: '支付异常',
								  icon: 'none',
								  duration: 1200
								});*/
							}
						});

					}else{
						
						if( res.data.status ){
							wx.showToast({
							  title: res.data.description,
							  icon: 'none',
							  duration: 1200
							});
						}
						if( res.data.message ){
							wx.showToast({
							  title: res.data.message,
							  icon: 'none',
							  duration: 1200
							});
						}
					}


				});



			},

			pay_notify: function() {

				var url = '&r=checkout.xpay.pay_notify';
				var data = {
					'order_id': this.order_id
				};
				appInstance.globalData.request(url, data, 'POST', function() {

				});

			},

			choose_shipping: function(shipping) {

				this.shipping_method = shipping;

			},

			// setPickupPerson: function(e) {
			// 	this.pickup_person = e.detail.value;
			// },

			// setPickupPhone: function(e) {
			// 	this.pickup_phone = e.detail.value;
			// },
		}
	}
</script>

<style lang="less">
	@import '../checkout/checkout.less';
</style>
